.get-apps__wrapper {
	display: flex;
	flex-direction: column;
}

.get-apps__wrapper > div {
	width: 100%;
}

.get-apps__card-title {
	font-size: 15px;
	margin-bottom: 4px;

	@include breakpoint('>480px') {
		font-size: 18px;
	}
}

.get-apps__desktop {
	@include breakpoint('>480px') {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}

.get-apps__mobile > div {
	width: 100%;
}

.get-apps__description {
	font-size: 13px;
	margin-bottom: 4px;

	@include breakpoint('>480px') {
		font-size: 15px;
	}
}

.get-apps__also-available,
.get-apps__description:last-child {
	margin-bottom: 12px;

	@include breakpoint('>480px') {
		margin-bottom: 0;
	}
}

.get-apps__mobile {

	@include breakpoint('>480px') {
		order: 2;
	}

	.get-apps__store-subpanel {

		@include breakpoint('>800px') {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.get-apps__badges {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

	.get-apps__magic-link-subpanel {

		margin-top: 64px;

		.get-apps__link-button-wrapper {

			@include breakpoint('>480px') {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}

			@include breakpoint('<480px') {

				.get-apps__magic-link-button {
					width: 100%;
				}
			}
		}

	}

	.get-apps__sms-subpanel {

		// This is a hack to allow us to use a feature flag to hide this subpanel
		// without the parent card having a big ugly blank space at the bottom.
		margin-top: 64px;

		.get-apps__sms-field-wrapper .form-phone-input {
			@include breakpoint('>800px') {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.form-fieldset__country {
				flex: 0;
				padding-right: 24px;
			}

			.form-fieldset__phone-number {
				flex: 1;
			}
		}

		.get-apps__sms-button-wrapper {

			@include breakpoint('>480px') {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}

			p {
				margin: 0;
				padding-right: 16px;
			}

			@include breakpoint('<480px') {

				p {
					margin-bottom: 24px;
				}

				.get-apps__sms-button {
					width: 100%;
				}
			}
		}
	}
}

.get-apps__illustration {
	background-color: var( --color-surface );
	box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ),
		0 1px 2px var( --color-neutral-0 );
	box-sizing: border-box;
	color: var( --color-primary-dark );
	max-width: 980px;
	overflow: hidden;
	padding: 16px;
	text-align: center;

	@include breakpoint('>480px') {
		padding: 24px;
	}
}

.get-apps__illustration-heading {
	font-size: 16px;
	font-weight: 600;
	padding: 0 24px;

	@include breakpoint('>480px') {
		font-size: 24px;
	}
}

.get-apps__illustration-tagline {
	font-size: 11px;
	margin-bottom: 0;
	padding: 0 24px;

	@include breakpoint('>480px') {
		font-size: 14px;
	}
}

.get-apps__card-text {
	@include breakpoint('>480px') {
		flex: 1;
	}
}

.get-apps__also-available {
	color: var( --color-text-subtle );
	font-size: 13px;
	font-style: italic;
}

.get-apps__desktop-button {
	@include breakpoint('>480px') {
		margin-left: 24px;
	}
}
